<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader class="my-header" :leftType="2"  :noLeft="false" showTitle="搜索"></myheader>
		<!-- #endif -->
		<view class="content">
			<view class="input" :style="{ top: `${headerHight}px` }">
				<view class="input-box">
					<image src="../../static/sousuo.svg" class="input-box-img" mode=""></image>
					<input type="text" class="input-box-txt" placeholder="店铺/服务" v-model="search" placeholder-style="color:#8292A2" />
				</view>
				<view class="input-search">搜索</view>
			</view>
			<view class="dingyue">
				<view class="dingyue-box" v-for="(item, index) in list" :key="index">
					<view class="dingyue-box-top">
						<image src="" class="dingyue-box-top-left" mode=""></image>
						<view class="dingyue-box-top-right">
							<view class="dingyue-box-top-right-1">我是名称</view>
							<view class="dingyue-box-top-right-2">订阅时间：2024-01-01 00:00:00</view>
							<view class="dingyue-box-top-right-3">
								<view class="dingyue-box-top-right-3-1">0.00/免费</view>
								<view class="dingyue-box-top-right-3-2">取消订阅</view>
							</view>
						</view>
					</view>
					<view class="dingyue-box-bottom">
						<view class="dingyue-box-bottom-1">
							<image src="" class="dingyue-box-bottom-1-img" mode=""></image>
							<view class="dingyue-box-bottom-1-txt">无汗不欢健身馆旗舰店</view>
						</view>
						<image src="../../static/xiangyou.svg" class="dingyue-box-bottom-2" mode=""></image>
					</view>
				</view>
			</view>
			<view class="no-data" v-if="list.length == 0">搜索无结果，请重试</view>
		</view>
	</view>
</template>

<script>
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			myheader
		},
		data() {
			return {
				list: [],
				params: {
					cursor: null,
					pageSize: 10
				},
				search: '',
				headerHight: 80
				
			}
		},
		onLoad() {
			this.getMsg()
		},
		beforeMount() {
			let selectQuery = uni.createSelectorQuery().in(this);
			selectQuery.selectAll('.my-header').boundingClientRect(rect => {
				this.headerHight = rect[0].height;
			}).exec()
			this.$forceUpdate();
		},
		onReachBottom() {
			console.log('wozoule')
			this.params.cursor++
			this.getMsg('add')
		},
		methods: {
			getMsg(flag) {
				this.$H.post("portal/feedback/list", this.params).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.cursor) {
							this.params.cursor = res.data.cursor
						}
						if (flag) {
							let arr = res.data.data? res.data.data: []
							this.list = this.list.concat(arr)
						} else {
							this.list = res.data.data? res.data.data: []
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.dingyue {
	width: calc(100% - 40px);
	padding: 10px 20px 60px;
	&-box {
		background: #fff;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 10px;
		&-bottom {
			display: flex;
			align-items: center;
			padding-top: 10px;
			&-1 {
				flex: 1;
				display: flex;
				align-items: center;
				margin-right: 10px;
				&-img {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					background: #efecea;
					margin-right: 10px;
				}
				&-txt {
					color: #1ABC9C;
					font-size: 16px;
					font-weight: 700;
				}
			}
			&-2 {
				width:20px;
				height: 20px
			}
		}
		&-top {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #EAECEF;
			padding-bottom: 10px;
			padding-top: 10px;
			&-left {
				width: 86px;
				height: 86px;
				border-radius: 10px;
				background: #eaecef;
				margin-right: 10px;
			}
			&-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 86px;
				&-1 {
					font-size: 16px;
					font-weight: 700;
					color: #34495E;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				&-2 {
					font-size: 14px;
					font-weight: 400;
					color: #8292A2;
					
				}
				&-3 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-1 {
						font-size: 16px;
						font-weight: 400;
						color: #2E4964;
					}
					&-2 {
						color: #E74C3C;
						border: 1px solid #E74C3C;
						font-size: 14px;
						font-weight: 700;
						width: 56px;
						height:22px;
						border-radius: 999px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 2px 6px;
					}
				}
			}
		}
	}
}
.input {
	display: flex;
	position: sticky;
	left: 0;
	top:0;
	background: #fff;
	z-index:100;
	align-items: center;
	width: calc(100% - 40px);
	padding: 0 20px 10px;
	&-box {
		padding: 10px;
		border-radius: 999px;
		flex: 1;
		display: flex;
		align-items: center;
		margin-right:10px;
		border: 1px solid #CBD1D8;
		&-img {
			width: 16px;
			height:16px;
		}
		&-txt {
			flex: 1;
			margin-left: 8px;
			color: #34495E;
			font-size: 14px;
			font-weight: 500;
		}
	}
	&-search {
		font-size: 16px;
		font-weight: 700;
		color: #1ABC9C;
	}
}
</style>
